<script setup>
import { ref } from 'vue'

const queryParams = ref({
  name: '',
  gender: ''
})

const emits = defineEmits(['query', 'reset'])

const handleQuery = () => {
  emits('query', { ...queryParams.value })
}

const resetQuery = () => {
  queryParams.value = {
    name: '',
    gender: ''
  }
  emits('reset')
}

defineExpose({
  queryParams
})
</script>

<template>
  <el-form 
    :model="queryParams" 
    :inline="true" 
    label-width="68px"
  >
    <el-form-item label="名称" prop="name">
      <el-input 
        v-model="queryParams.name" 
        placeholder="请输入名称" 
        clearable 
        @keyup.enter="handleQuery" 
      />
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-select 
        v-model="queryParams.gender" 
        clearable 
        placeholder="请选择" 
        style="width: 240px"
      >
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
</template>
